<script setup>
    import { useStore } from 'vuex'
    import DataSearch from '../components/eleFile/DataSearch.vue'
    
    const store = useStore()

    let typeData = ['基础信息库建设', '单位管理', '第三方机构管理', '岗位聘用管理', '安置对象管理', '日常监管', '补贴资金管理', '公岗退出管理', '资金监管', '人员画像']

    let currentIndex = $ref(0)



    // 点击列表
    let listDetails = $ref(null)
    const handleClick = (index) => {
        currentIndex = index
        listDetails.showList(index)
    }


</script>

<template>
    <div class="rule-of-law-wrap content-main">
        <div class="left-card">
            <div class="crowd-type-list">
                <div class="list">
                    <div 
                        class="item flex-center"
                        v-for="(item, index) in typeData"
                        :key="index"
                        :class="{ acative: currentIndex == index }"
                        @click="handleClick(index)"
                    >
                        <span>{{ item }}</span>
                    </div>
                </div>

            </div>
        </div>

        <!-- 精准查询 -->
        <div class="center-search">
            <data-search ref="listDetails"></data-search>
        </div>


    </div>

</template>

<style lang="less" scoped>
    .rule-of-law-wrap{
        .center-search{
            margin: 108px 38px 0 343px;
        }
        .crowd-type-list {
            width: 295px;
            height: 899px;
            background: url('../assets/images/eleFile/left-bg.png') center no-repeat;

            .list{
                padding-top: 50px;
                
                .item{
                    margin-bottom: 16px;
                    width: 253px;
                    height: 65px;
                    background: url('../assets/images/eleFile/item-1.png') center no-repeat;
                    cursor: pointer;

                    &.acative{
                        background: url('../assets/images/eleFile/item-1-on.png') center no-repeat;
                        cursor: pointer;
                    }


                    &:hover{
                        background: url('../assets/images/eleFile/item-1-on.png') center no-repeat;
                    }

                    span{
                        font-size: 22px;
                        line-height: 66px;
                        color: rgba(255, 255, 255, 0.6);
                        width: 160px;
                        margin-top: 6px;
                        margin-left: 60px;
                        text-align: center;
                    }

                    
                    .item(@counter) when (@counter >0 ) {
                        &:nth-child(@{counter}) {
                            background: url("../assets/images/eleFile/item-@{counter}.png") center no-repeat;
                            &.acative, &:hover { 
                                background: url("../assets/images/eleFile/item-@{counter}-on.png") center no-repeat; 
                                span{
                                    color: #fff; 
                                }
                            }
                        }
                        .item(( @counter - 1 ));// 递归调用自身
                    }
                    .item(10);
                }

            }
        }
    }
</style>